<template>
	<view>
		<u-navbar back-text="社区" :customBack="back" backIconName=" " :backTextStyle="backTextColor"
			backIconColor="#39CCCC" :background="background">
			<view class="search-wrap" @click="toSearch">
				<u-search height="56" :showAction="false"></u-search>
			</view>
			<view class="navbar-right" slot="right">
				<view class="right-item">
					<u-icon name="chat" size="38"></u-icon>
					<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
				</view>
				<view class="right-item">
					<u-icon name="setting" size="38" @click="open"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="swiper">
			<u-swiper :vertical="vertical" :list="list" mode=" " @click="swiperClick" :current="current"
				@change="change" :autoplay="false" borderRadius="12" imgMode="aspectFill" :height="height">
			</u-swiper>
			<bottomRight :list="rightList"></bottomRight>
		</view>
		<u-modal v-model="show" title=" " confirm-text="关闭">
			<view class="u-p-30">
				<view class="u-flex u-row-center">
					<view class="u-m-r-10">预览模式</view>
					<u-switch v-model="vertical" @change="switchchange" size="38"></u-switch>
				</view>
				<view class="u-font-xs u-text-center u-tips-color u-p-t-20">
					开启为上下滑模式，关闭为左右滑动模式
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import bottomRight from '@/components/bottomRight.vue';
	export default {
		components: {
			bottomRight
		},
		data() {
			return {
				list: [{
					image: 'https://mp-90028e32-7180-4d7a-acc5-73618ebb57c6.cdn.bspapp.com/cloudstorage/46068805-c291-4fa5-974c-4ca9d0717836.jpg',
				}],
				height: '',
				vertical: true,
				background: this.TopColor,
				backTextColor: {
					'color': '#ffffff'
				},
				show:false,
				current: 0,
				rightList: [{
					icon: 'heart',
					name: '下载'
				}, {
					icon: 'red-packet',
					name: '分'
				}, {
					icon: 'share',
					name: '分享'
				}]
			}
		},
		onLoad() {
			let system = uni.getSystemInfoSync();
			let height = (system.windowHeight - system.statusBarHeight - 44);
			let rpx = height / (uni.upx2px(100) / 100);
			this.height = parseInt(rpx);
			this.apiblibk()
		},
		methods: {
			apiblibk() {
				this.$u.get('https://api.vvhan.com/api/acgimg', {
					type: 'json'
				}).then(res => {
					this.list.push({
						image: res.imgurl
					})
				})
			},
			back() { // 首页
				uni.navigateBack({
					delta: 2
				})
			},
			swiperClick(e) {
				let url = this.list[e].image;
				this.$common.previewImage(0, [url]);
			},
			// 简单写一下滑动加载图片
			change(e) {
				if (e > 0) {
					let leng = this.list.length - 1;
					if (e == leng) {
						this.apiblibk()
					}
				}
			},
			open(){
				this.show = true
			},
			switchchange(e){
				this.vertical = e;
			},
			toSearch() {
				this.$common.navigateTo('/pages/index/search')
			},
			appShare() {
				console.log('分享')
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		height: 100%;
	}

	.search-wrap {
		margin: 0 30rpx 0 10rpx;
		flex: 1;
	}

	.warp {
		display: flex;
		float: right;
		align-items: center;
		justify-content: center;
		height: 100%;
		margin-right: 100rpx;
	}
</style>
